<template>
  <div class="detail">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="lunBo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in imgList" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="message bg_ff">
        <div class="top pd5">
          <p class="red">￥{{ this.mainList.retailPrice }}</p>
          <p class="grey">￥{{ this.mainList.counterPrice }}</p>
        </div>
        <div class="pd5">{{ this.mainList.name }}</div>
        <div class="pd5 grey">{{ this.mainList.brief }}</div>
      </div>
    </div>
    <div class="detail_message_tip">
      <div class="detail_message_tip_a">
        <div class="choose">请选择</div>
        <van-cell is-link @click="showPopup">规格</van-cell>
        <van-popup
          v-model:show="show"
          position="bottom"
          :style="{ height: '60%' }"
          round
        >
         <div class="top">
           <img :src="mainList.picUrl" alt="" />
            <div class="price">
              <p>￥{{ mainList.retailPrice }}</p>
              <p>请选择规格</p>
            </div>
         </div>
         <div class="size" v-if="choice[0] != null">
            <span>{{ choice[0].name }}</span>
            <ul>
              <li
                v-for="(t, i) in choice[0].valueList"
                :key="i"
                @click="changeC1(i)"
                :class="i == j ? 'active' : ''"
              >
                {{ t.value }}
              </li>
            </ul>
          </div>
          <div class="size" v-if="choice[1] != null">
            <span>{{ choice[1].name }}</span>
            <ul>
              <li
                v-for="(t, i) in choice[1].valueList"
                :key="i"
                @click="changeC2(i)"
                :class="i == q ? 'active' : ''"
              >
                {{ t.value }}
              </li>
            </ul>
          </div>
          <div class="num">
            <p>购买数量</p>
            <van-stepper v-model="value" />
          </div>
         
          <div class="div">
            <van-action-bar>
            <van-action-bar-button
              color="#be99ff"
              type="warning"
              text="加入购物车"
              @click="add(this.productList[0].id,this.productList[0].goodsId)"
            />
            <van-action-bar-button
              color="#7232dd"
              type="danger"
              text="立即购买"
            />
          </van-action-bar>
          </div>
        </van-popup>
      </div>
      <div class="shuxing">
        <van-cell is-link @click="showPopup2">属性</van-cell>
        <van-popup
          v-model:show="show2"
          position="bottom"
          :style="{ height: '60%' }"
          >
          <h4>商品属性</h4>
           <ul>
            <li v-for="(item,index) in shuxing" :key="index">
              <p>{{item.attribute}}</p>
              <p>{{item.value}}</p>
            </li>
          </ul>
          </van-popup
        >
      </div>
       <div class="yunfei">满88免邮费</div>
    </div>

    <div class="pic" v-html="this.mainList.detail"></div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="shop-o" text="店铺" />
       <van-action-bar-icon icon="star" text="已收藏" color="#be99ff" />
      <van-action-bar-button color="#be99ff" type="warning" text="加入购物车"  @click="add(this.productList[0].id,this.productList[0].goodsId)"/>
      <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
    </van-action-bar>

    <div class="main bg_ff">商品详情</div>
  </div>
</template>
<script>
import { detailapi } from "../../assets/api/homeapi.js";
import { addapi } from "../../assets/api/homeapi.js";
export default {
  data() {
    return {
      imgList: [],
      mainList: {},
      choice:[],
      shuxing:[],
      show: false,
      show2: false,
      show3: false,
      j:null,
      q:null,
      productList:[]
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    showPopup() {
      this.show = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    showPopup3() {
      this.show3 = true;
    },
    changeC1(i){
      // console.log(i);
      // this.$refs.name[i].style.color="red"
      this.j = i;

    },
    changeC2(i){
      // console.log(i);
      // this.$refs.name[i].style.color="red"
      this.q = i;

    },onClickIcon (){
      Toast('点击图标')
      }, 
    add(productid,goodsId){
      let data={
        goodsId:goodsId,
         number:1,
        productId:productid,
       
      }
      addapi(data).then(res=>{
        this.$router.push('/car')
      })
    }
  },
  mounted() {
    detailapi(this.$route.query.id).then((res) => {
      
      this.imgList = res.data.data.info.gallery;
     console.log(res.data.data);
      this.mainList = res.data.data.info;
      //  console.log(this.mainList.picUrl);
      this.choice = res.data.data.specificationList;
        this.shuxing = res.data.data.attribute
        this.productList=res.data.data.productList
        console.log(this.productList[0].goodsId);
        console.log(this.productList[0].id);

    });
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 667px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;

  text-align: center;

  img {
    width: 100%;
  }
}
.red {
  font-size: 18px;
  color: rgb(219, 66, 65);
}
.grey {
  font-size: 14px;
  color: rgb(186, 186, 186);
}
.message {
  margin-top: 5px;
  padding: 20px 0;
  .top {
    display: flex;
    p {
      margin-right: 20px;
      display: block;
      line-height: 24px;
    }
  }
}
.detail_message_tip {
  margin: 10px 0;
  width: 100%;
}
.main {
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.pic {
  width: 375px;
   :deep(img){
    width: 100%;
  }
}
.top {
        display: flex;
        height: 100px;
        border: 1px solid #fef2e6;
        img {
          width: 96px;
        }
        .price {
          margin-top: 40px;
          margin-left: 10px;
          p {
            &:first-child {
              font-size: 22px;
              color: red;
            }
            &:last-child {
              font-size: 12px;
              color: rgb(124, 122, 122);
            }
          }
        }
}
 .size {
        padding: 0px 10px;
        height: 80px;
        // background-color: pink;
        border-bottom: 1px solid #fef2e6;
        span {
          display: block;
          height: 30px;
          line-height: 30px;
        }
        ul {
          display: flex;
          li {
            box-sizing: border-box;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            padding: 0px 10px;
            margin-right: 10px;
            background-color: #f7f8fa;
          }
        }
      }
      .num {
        padding: 0px 10px;
        display: flex;
        justify-content: space-between;
      }
    .active {
  background-color: #fde7ea;
  color: pink;
}
 .shuxing {
      h4 {
        text-align: center;
        height: 80px;
        line-height: 80px;
      }
      ul {
        li {
          padding: 20px;
          display: flex;
          justify-content: space-between;
          p {
            &:first-child {
              flex: 1;
            }
            &:last-child {
              flex: 2;
            }
          }
        }
      }
    }
     .yunfei {
      height: 40px;
      text-align: right;
      line-height: 40px;
      color: #a497b3;
      padding-right: 20px;
    }
    .detail_message_tip_a{
      position: relative;
      .choose{
        position: absolute;
        top:10px;
        right:37px;
        z-index: 2;
      }
    }
    .pic{
      box-sizing: border-box;
      p{
        margin: 0 ;
        padding: 0;
        img{
            max-width: 100%;
            vertical-align:top;
         }}
         
    }
</style>